<template>
	<div class="center">
		<div class="box">
			<div class="box_left">
				<div class="box_left_user">
					<img :src="dataList.userinfo?dataList.userinfo.avatar:'@/assets/userimg.png'" alt="">
					<p>{{dataList.userinfo?dataList.userinfo.nickName:'昵称'}}</p>
					<span>学号：202305160001</span>
					<span>电话：{{dataList.userinfo?dataList.userinfo.phone:'暂无'}}</span>
				</div>
				<div class="box_left_tab">
					<li v-for="(tab,idx) in dataList.tabList" :class="{active:tab.name== rootName}" @click="select(idx,tab.path)">
						<img v-show="tab.name!== rootName" :src="tab.img" alt="">
						<img v-show="tab.name== rootName" :src="tab.aimg" alt="">
						<p>{{tab.name}}</p>
					</li>
					<li @click="logOut">
						<img src="../../assets/user/u-icon8.png" alt="">
						<p>退出登录</p>
					</li>
				</div>
			</div>
			<div>
				<router-view></router-view>
			</div>
		</div>

	</div>

</template>

<script setup>
	import icon1 from '/src/assets/user/u-icon1.png'
	import icon2 from '/src/assets/user/u-icon2.png'
	import icon3 from '/src/assets/user/u-icon3.png'
	import icon4 from '/src/assets/user/u-icon4.png'
	import icon5 from '/src/assets/user/u-icon5.png'
	import icon6 from '/src/assets/user/u-icon6.png'
	import icon7 from '/src/assets/user/u-icon7.png'
	import aicon1 from '/src/assets/user/au-icon1.png'
	import aicon2 from '/src/assets/user/au-icon2.png'
	import aicon3 from '/src/assets/user/au-icon3.png'
	import aicon4 from '/src/assets/user/au-icon4.png'
	import aicon5 from '/src/assets/user/au-icon5.png'
	import aicon6 from '/src/assets/user/au-icon6.png'
	import aicon7 from '/src/assets/user/au-icon7.png'
	import {
		onBeforeMount,
		reactive,
		computed
	} from 'vue'
	import {
		useRouter
	} from 'vue-router'
	const router = useRouter()
	const dataList = reactive({
		tabId:0,
		userinfo:'',
		tabList: [{
				path: '/leaveList',
				name: '请假申请',
				img: icon1,
				aimg: aicon1
			},
			{
				path: '/certificate',
				name: '我的证书',
				img: icon2,
				aimg: aicon2
			},
			{
				path: '/study',
				name: '我的学习',
				img: icon3,
				aimg: aicon3
			},
			{
				path: '/project',
				name: '我的创业项目',
				img: icon4,
				aimg: aicon4
			},
			{
				path: '/information',
				name: '报名信息',
				img: icon5,
				aimg: aicon5
			},
			{
				path: '/message',
				name: '消息通知',
				img: icon6,
				aimg: aicon6
			},
			{
				path: '/myCourses',
				name: '我的课程',
				img: icon3,
				aimg: aicon3
			},
			
			{
				path: '/callCenter',
				name: '客服中心',
				img: icon7,
				aimg: aicon7
			}
		]
	})
	onBeforeMount(() => {
		dataList.userinfo = localStorage.getItem('userinfo')
	})
	const rootName = computed(()=> {
		return router.currentRoute.value.meta.name
	})
	const select = (idx,path) => {
		dataList.tabId = idx
		router.push(path)
	}
	const logOut = () => {
		localStorage.removeItem('userinfo')
		localStorage.removeItem('userUuid')
		router.go(0)
		ElMessage.success('已退出登录')
	}
</script>

<style lang="scss" scoped>
	.center {
		min-height: 850px;
		background: #F5F9F9;
		display: flex;
		justify-content: center;

	}

	.box {
		display: flex;
		width: 1200px;
		min-height: 700px;
		background: #FFFFFF;
		border-radius: 10px;
		margin: 30px 0;
		padding: 30px 30px 30px 0;

		&_left {
			&_user {
				width: 210px;
				height: 205px;
				background: rgba(17, 145, 142, 0.05);
				border-radius: 20px 20px 20px 20px;
				padding: 20px 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				margin-left: 20px;

				img {
					width: 100px;
					height: 100px;
					border-radius: 50%;
				}
				span{
					width: 190px;
				}
			}

			&_tab {
				margin-top: 15px;
				li{
					display: flex;
					width: 231px;
					padding: 15px 0 15px 62px;
					img {
						width: 21px;
						height: 21px;
						margin-right: 15px;
					}
					p{
						font-size: 16px;
						font-weight: 400;
						color: #333333;
					}
				}
				.active{
					background: #11918E;
					
					p{
						color: #FFFFFF;
					}
					border-radius: 0 100px 100px 0;
				}
			}
		}
	}
</style>